<template>
<div>
    <div class="background">
        <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div class="front">
        <van-form @submit="onSubmit">
            <div>
                <div style="margin: 35%;">
                    <van-image class="imagemargin" width="100%" :src="require('@/assets/img/swipeImage/yun_yinyue.png')" />
                </div>
                <div style="margin: 10%; margin-top:-5%; margin-bottom:-3% ;">
                    <van-field
                        v-model="phone"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </div>
                <div style="margin: 12%;">
                    <van-button round block color="rgba(255, 255, 255, 0.666)" type="info" native-type="submit">
                    <span style="color:#666">提交</span>
                    </van-button>
                </div>
            </div>
        </van-form>
    </div>
</div>
</template>

<script>
import List from '@/api/index'
export default {
    data(){
        return{
            phone:'',
            password:'',
            imgSrc:require('@/assets/img/swipeImage/bg_login.jpg')
        }
    },
    methods: {
        //{avatarUrl,nickname,followeds,follows}
        onSubmit() {
            let _this = this;
            List.phoneLogin(this.phone,this.password).then(function(res){
                let user = {};
                if(res.data.code == 200){
                    user.avatarUrl = res.data.profile.avatarUrl;
                    user.nickname = res.data.profile.nickname;
                    user.followeds = res.data.profile.followeds;
                    user.follows = res.data.profile.follows;
                    user.id = res.data.account.id;
                    _this.$store.commit('setUser', user);
                    _this.$router.push('/my');
                }else{
                    console.log(res.data.msg)
                }
            })
        },
  },
}
</script>

<style scoped>
.bg{
    background: '@/assets/img/swipeImage/bg_login.jpg';
}
.background{
    width:100%;  
    height:100%;  /*宽高100%是为了图片铺满屏幕*/
    z-index:-1;
    position: absolute;
    
}
.front{
    z-index:1;
    position: absolute;
    left:0; 
    right:0; 
    top:0;
    bottom:0;
    margin:auto;
}

</style>